<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .txy-proj header.header {
            height: 60px;
            background-color: #2B303B;
        }

        /* 头部logo 和 导航 */
        header.header .txy-header {
            position: relative;
            width: 1200px;
            height: 100%;
            margin: 0 auto;
        }

        header.header .txy-header .txy-logo {
            position: absolute;
            top: 0;
            left: 0;
            width: 80px;
            height: 60px;
            line-height: 60px;
        }

        header.header .txy-header .txy-header-list {
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
        }

        header.header .txy-header .txy-header-list ul {
            list-style: none;

        }

        header.header .txy-header .txy-header-list ul li {
            float: left;
        }


        header.header .txy-header .txy-header-list ul li a {
            display: block;
            color: #fff;
            width: 90px;
            text-align: center;
            border-right: 1px solid #fff;
            text-decoration: none;
        }

        header.header .txy-header .txy-header-list ul li:last-child a {
            border-right: none;

        }

        /* 侧边导航 */
        .txy-proj aside.aside {
            height: 480px;
            background: url(./images/banner.png) no-repeat center center #181C28;
            background-color: #181C28;
        }

        aside.aside .txy-list {
            width: 1200px;
            height: 100%;
            /* background-color: #f2f2f2; */
            margin: 0 auto;
        }

        aside.aside .txy-list ul {
            width: 240px;
            height: 100%;
            background-color: #1B2A3F;
            list-style: none;
            color: #fff;
            padding: 40px 20px 0 20px;
        }

        aside.aside .txy-list ul li {
            display: flex;
            justify-content: space-between;
            align-items: space-between;
            height: 40px;
            line-height: 40px;

        }

        aside.aside .txy-list ul li a {
            text-decoration: none;
            color: #fff;
            height: 40px;
            line-height: 40px;
        }

        /* 内容部分 */
        .txy-proj section.section {
            height: 800px;
            background-color: #fff;
        }

        section.section .txy-section {
            width: 1200px;
            height: 100%;
            margin: 0 auto;
        }

        section.section .txy-section h2 {
            font-weight: normal;
            margin: 50px 0 20px 0;
            font-size: 30px;
            text-align: center;
        }

        section.section .txy-section p {
            font-size: 18px;
            text-align: center;
            margin-bottom: 25px;
        }

        section.section .txy-section .txy-section-main {
            height: 600px;
            border: 1px solid #ccc;
            display: flex;
            padding: 40px;
        }

        section.section .txy-section .txy-section-main .txy-sec-left {
            width: 50%;
            /* border: 1px solid blue; */
            height: 100%;
            /* margin: 40px 0 20px 40px; */
        }

        section.section .txy-section .txy-section-main .txy-sec-left h3 {
            font-weight: normal;
            font-size: 36px;
            margin-bottom: 20px;
            border-bottom: 2px solid #ccc;
            width: 160px;
            text-align: center;
            padding-bottom: 5px;
        }

        section.section .txy-section .txy-section-main .txy-sec-left p {
            text-align: left;
            font-size: 20px;
            color: rgba(0, 0, 0, 0.6);
            width: 500px;
            margin-bottom: 60px;

        }

        section.section .txy-section .txy-section-main .txy-sec-left a {
            padding: 15px 60px;

            text-decoration: none;
            border: 3px solid #FF9C00;
        }


        section.section .txy-section .txy-section-main .txy-sec-right {
            width: 50%;
            height: 100%;
        }

        section.section .txy-section .txy-section-main .txy-sec-right img {
            width: 560px;
            height: 90%;
        }

        footer.footer {
            height: 500px;
            background-color: #2E3033;
        }

        footer.footer .txy-footer {
            width: 1200px;
            height: 100%;
            margin: 0 auto;
            /* border: 1px solid #ccc; */
            background-color: #2E3033;
            display: flex;
            padding-top: 30px;
            color: #fff;
        }

        footer.footer .txy-footer .txy-footer-left {
            width: 80%;
            height: 100%;
            padding-right: 180px;
            display: flex;
            justify-content: space-between;
            align-items: space-between;
        }

        footer.footer .txy-footer .txy-footer-left dl dt {
            margin-bottom: 20px;
        }


        footer.footer .txy-footer .txy-footer-left dl dd {
            color: #ccc;
        }

        footer.footer .txy-footer .txy-footer-right {
            width: 20%;
            height: 100%;
            /* border: 1px solid green; */
        }

        footer.footer .txy-footer .txy-footer-right p {
            color: #ccc;
            font-size: 18px;
        }

        footer.footer .txy-footer .txy-footer-right p:last-child {
            margin-top: 30px;
            height: 60px;
            width: 100%;
            background-color: #00A4FF;
            text-align: center;
            line-height: 60px;
        }
    </style>
</head>

<body>
    <div class="txy-proj">
        <header class="header">
            <div class="txy-header">
                <div class="txy-logo">
                    <img src="./images/logo.png" alt="">
                </div>
                <div class="txy-header-list">
                    <ul>
                        <li><a href="#">最新活动</a></li>
                        <li><a href="#">产品</a></li>
                        <li><a href="#">解决方案</a></li>
                        <li><a href="#">定价</a></li>
                        <li><a href="#">文档</a></li>
                        <li><a href="#">企业中心</a></li>
                        <li><a href="#">云市场</a></li>
                        <li><a href="#">开发者支持</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">合作与生态</a></li>
                        <li><a href="#">客户</a></li>
                    </ul>
                </div>
            </div>

        </header>
        <aside class="aside">
            <div class="txy-list">
                <ul>
                    <li><a href="#">云服务器</a><span>></span></li>
                    <li><a href="#">轻量应用服务器</a><span>></span></li>
                    <li><a href="#">域名注册</a><span>></span></li>
                    <li><a href="#">网站备案</a><span>></span></li>
                    <li><a href="#">对象存储</a><span>></span></li>
                    <li><a href="#">云硬盘</a><span>></span></li>
                    <li><a href="#">云数据库</a><span>></span></li>
                    <li><a href="#">云数据库</a><span>></span></li>
                    <li><a href="#">批量计算</a><span>></span></li>
                    <li><a href="#">容器服务</a><span>></span></li>
                </ul>
            </div>
        </aside>
        <section class="section">
            <div class="txy-section">
                <h2>云从业者培训及认证</h2>
                <p>好好学习，天天向上</p>
                <div class="txy-section-main">
                    <div class="txy-sec-left">
                        <h3>在线课程</h3>
                        <p>
                            本课程专为云计算初学者、学生、个人开发者打造，购买云+校园任意套餐可免费观看课程视频本课程专为云计算初学者、学生、个人开发者打造，购买云+校园任意套餐可免费观看课程视频本课程专为云计算初学者、学生、个人开发者打造，购买云+校园任意套餐可免费观看课程视频本课程专为云计算初学者、学生、个人开发者打造，购买云+校园任意套餐可免费观看课程视频本课程专为云计算初学者、学生、个人开发者打造，购买云+校园任意套餐可免费观看课程视频
                        </p>
                        <a href="#">开始学习</a>
                    </div>
                    <div class="txy-sec-right">
                        <img src="./images/right.png" alt="">
                    </div>
                </div>
        </section>

        <footer class="footer">
            <div class="txy-footer">
                <div class="txy-footer-left">
                    <dl>
                        <dt>腾讯云计算</dt>
                        <dd>产品</dd>
                        <dd>云市场</dd>
                        <dd>客户案例</dd>
                        <dd>产品发布台</dd>
                        <dd>网站备案</dd>
                        <dd>认证信息</dd>
                        <dd>许可证说明</dd>
                        <dd>隐私声明</dd>
                        <dd>关于我们</dd>
                    </dl>
                    <dl>
                        <dt>解决方案</dt>
                        <dd>视频</dd>
                        <dd>游戏</dd>
                        <dd>金融</dd>
                        <dd>电商</dd>
                        <dd>网站</dd>
                        <dd>大数据</dd>
                        <dd>人脸核身</dd>
                        <dd>在线教育</dd>
                        <dd>微信小程序</dd>
                        <dd>微信小程序音视频</dd>
                    </dl>
                    <dl>
                        <dt>资源与社区</dt>
                        <dd>免费套餐</dd>
                        <dd>入门中心</dd>
                        <dd>定价中心</dd>
                        <dd>资源中心</dd>
                        <dd>腾讯云大学</dd>
                        <dd>云+社区</dd>
                        <dd>专栏</dd>
                        <dd>问答</dd>
                        <dd>沙龙</dd>
                    </dl>
                    <dl>
                        <dt>合作与生态</dt>
                        <dd>合作伙伴</dd>
                        <dd>合作伙伴学院</dd>
                        <dd>推广奖励</dd>
                        <dd>云+公益</dd>
                        <dd>云+校园</dd>
                        <dd>云+创业</dd>
                        <dd>Techo 开发者大会</dd>
                        <dd>腾讯数字生态大会</dd>
                        <dd>云启产业计划</dd>
                        <dd>腾讯云启创新基地</dd>
                    </dl>
                    <dl>
                        <dt>管理与支持</dt>
                        <dd>公告</dd>
                        <dd>控制台</dd>
                        <dd>续费管理</dd>
                        <dd>访问管理</dd>
                        <dd>安全中心</dd>
                        <dd>举报平台</dd>
                        <dd>工单管理</dd>
                        <dd>联系我们</dd>
                    </dl>
                </div>
                <div class="txy-footer-right">
                    <p>Copyright © 2013 - 2020</p>
                    <p>Tencent Cloud. All Rights Reserved.</p>
                    <p>腾讯云 版权所有</p>
                    <p>购买咨询</p>
                </div>
            </div>
        </footer>
    </div>
</body>

</html>